<template>
  <view class="page-bc">
    <view class="page-container">
      <view class="form-card">
        <view class="title">队伍名称</view>
        <view class="form-con">
          <view class="form-item" v-for="(mem, i) in memberList" :key="i">
            <view class="form-label"> {{ mem.label }} </view>
            <view class="add-con">
              <image
                class="add-icon"
                src="@/static/image/组 13@2x.png"
                mode="widthFix"
                @click="addMember(mem)"
              ></image>
              <view class="add-text">{{ mem.label }}姓名</view>
            </view>
          </view>
        </view>
      </view>
      <view class="btn-box">
        <image
          class="img-btn"
          src="@/static/image/返回@2x.png"
          mode="widthFix"
          @click="goBack"
        ></image>
        <image
          class="img-btn"
          src="@/static/image/报名@2x.png"
          mode="widthFix"
          @click="triggerSubmit"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  created() {},
  data() {
    return {
      memberList: [
        {
          label: '队长',
          name: '',
        },
        {
          label: '教练',
          name: '',
        },
        {
          label: '队员',
          name: '',
        },
        {
          label: '队员',
          name: '',
        },
      ],
    };
  },
  methods: {
    addMember(mem) {},
    goBack() {},
    triggerSubmit() {},
  },
};
</script>

<style lang="less" scoped>
.page-bc {
  background-image: url('https://web.skyelook.com/kf/adidas/miniprogram/球队认证/form-bg.png');
  align-items: center;
  overflow: auto;
}
.form-card {
  width: 100%;
  margin-top: 170rpx;
  padding: 120rpx 40rpx 140rpx;
  background-image: url('https://web.skyelook.com/kf/adidas/miniprogram/球队认证/组 8@2x.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  font-family: 'SourceHanSansCN-Bold', 'SimHei', '黑体', sans-serif;
  font-weight: bold;
  color: #000;
  align-items: center;
  & > .title {
    font-size: 48rpx;
    text-align: center;
  }
}
.form-con {
  width: 64vw;
  margin-top: 20rpx;
}
.form-item {
  flex-direction: row;
  align-items: center;
  margin-top: 30rpx;
  font-family: 'SourceHanSansCN-Bold', 'SimHei', '黑体', sans-serif;
  font-weight: bold;
  color: #000;
}
.form-label {
  text-align-last: justify;
  margin-right: 20rpx;
  flex-shrink: 0;
  font-size: 32rpx;
}
.add-con {
  background-color: #fff;
  flex-direction: row;
  align-items: center;
  padding: 15rpx 25rpx;
  flex-grow: 1;
  .add-icon {
    width: 60rpx;
    margin-right: 20rpx;
  }
  .add-text {
    font-size: 30rpx;
  }
}

.btn-box {
  width: 100%;
  margin-top: 60rpx;
  padding: 0 40rpx;
  flex-direction: row;
  justify-content: space-between;
  .img-btn {
    width: 40vw;
  }
}
</style>
